<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link href="/static/view/upload_files/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
    <script src="/static/view/upload_files/fileinput.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container kv-main" style="padding-top: 20px;">
    <h1>上传新文件</h1>
    <p>选择文件后，点击下方的“开始上传”按钮。</p>
    
    <input id="file-uploader" name="file" type="file" multiple>
    
    <hr>
    
    <button id="custom-upload-btn" class="btn btn-success">开始上传</button>
    <a href="/static/view/home.html" class="btn btn-primary">返回主页</a>
    
    <div id="upload-status" style="margin-top: 20px; text-align: left;"></div>
</div>

<script>
$(document).ready(function() {
    var token = localStorage.getItem("token");
    if (!token) {
        alert("请先登录！");
        window.location.href = '/static/view/signin.html';
        return;
    }

    // 插件初始化（保持不变）
    $("#file-uploader").fileinput({
        uploadUrl: false,
        showUpload: false,
        // ... 其他配置
    });

    // --- 核心改动：为我们自己的按钮绑定新的上传逻辑 ---
    $("#custom-upload-btn").on("click", function() {
        var filesToUpload = $('#file-uploader').fileinput('getFileStack');
        if (filesToUpload.length === 0) {
            alert('请先选择要上传的文件！');
            return;
        }

        var statusDiv = $("#upload-status");
        statusDiv.html('<h4>上传状态:</h4>');

        filesToUpload.forEach(function(file, index) {
            var formData = new FormData();
            formData.append('file', file);
            // 注意：我们不再需要手动添加 token 到 formData 了
            
            // --- 解决方案：使用 fetch API 进行上传 ---
            fetch('/file/upload', {
                method: 'POST',
                headers: {
                    // fetch API 需要我们手动设置 Authorization 头
                    'Authorization': 'Bearer ' + token
                },
                body: formData // 直接将 formData 作为 body
            })
            .then(response => {
                // 首先检查网络响应是否成功
                if (!response.ok) {
                    // 如果服务器返回了错误状态码（如 400, 500），则先将响应体转为 JSON
                    return response.json().then(err => { 
                        // 将后端返回的错误信息抛出
                        throw new Error(err.error || err.data || '服务器错误'); 
                    });
                }
                return response.json(); // 如果成功，将响应体转为 JSON
            })
            .then(data => {
                // 处理成功的响应
                statusDiv.append(`<p class="text-success">文件 "<strong>${file.name}</strong>" 上传成功！</p>`);
            })
            .catch(error => {
                // 统一处理所有错误（网络错误或业务逻辑错误）
                statusDiv.append(`<p class="text-danger">文件 "<strong>${file.name}</strong>" 上传失败！原因: ${error.message}</p>`);
            });
        });

        $('#file-uploader').fileinput('clear');
    });
});
</script>

</body>
</html>
